<template>
  <el-card class="attr-list">
    <!--
      @click="showAttr" - 回调函数的参数时event对象
      @click="showAttr()" - 回调函数才没有参数
     -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="showAttr()"
    >
      添加属性
    </el-button>

    <el-table :data="attrList" border class="attr-table">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="attrName" label="属姓名" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            class="attr-tag"
          >
            {{ attrValue.valueName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{ row, $index }">
          <el-button
            type="warning"
            size="small"
            icon="el-icon-edit"
            @click="showAttr(row)"
          />
          <el-button
            v-if="$hasBtnPermission('btn.Attr.remove')"
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="delAttr(row.id, $index)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getAttrList, delAttr } from '@/api/product/attr'

export default {
  name: 'AttrList',
  data() {
    return {
      // 属性列表数据
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    /*
      需求：
        1. 第一次选择三级分类请求数据展示
        2. 第二次，当你选择一级分类或二级分类时，此时三级分类会清空，数据也清空
           当你重新选择三级分类时，在重新请求
    */
    category3Id: {
      async handler(category3Id) {
        if (!category3Id) {
          // 监视属性第一次不会触发，没有immediate：true
          // 所以当你监视属性触发一定是发生了变化
          // category3Id没有值，说明用户点了一级分类或二级分类
          this.attrList = []
          return
        }

        const { category1Id, category2Id } = this

        const res = await getAttrList({
          category1Id,
          category2Id,
          category3Id
        })

        this.attrList = res.data
      },
      immediate: true // 第一次就会触发
    }
  },
  methods: {
    ...mapMutations('attr', ['SET_ATTR']),
    // 显示更新数据
    // showUpdateAttr(row) {
    //   this.$emit('setIsShowAttrList')
    //   this.SET_ATTR(row) // 将当前行数据交给vuex保管
    // },
    // // 显示添加属性
    // showAddAttr() {
    //   // 子组件需要将父组件的数据更新，使用：
    //   /*
    //     父 -> 子  props
    //     子 -> 父  自定义事件
    //     父 <-> 子 .sync
    //   */
    //   this.$emit('setIsShowAttrList')
    //   this.SET_ATTR({}) // 清空数据
    // }
    showAttr(
      row = {
        attrName: '',
        attrValueList: [] // 为了让添加属性时不报错
      }
    ) {
      this.$emit('setIsShowAttrList')
      this.SET_ATTR(row)
    },
    // 删除属性
    async delAttr(id, index) {
      // 发送请求删除服务器的数据
      await delAttr(id)
      /*
        删除客户端数据：
          1. 重新发送请求，获取最新的数据展示，自然被删除的数据就无了
            优点：简单、无脑
            缺点：需要多发一个请求
          2. 手动删除本地需要删除的数据（性能更好）
            优点：可以不用发送请求，减少请求数量
            缺点：稍微麻烦
      */
      this.attrList.splice(index, 1)

      this.$message.success('删除成功')
    }
  }
}
</script>

<style>
.attr-list {
  margin: 10px;
}
.attr-table {
  margin-top: 20px;
}
.attr-tag {
  margin: 5px 10px 0;
}
</style>
